<template>
    <view>
        <!-- <u-cell-group> -->
            <!-- <u-swipe-action v-for="item in businessList" :key="item.id" :autoClose="true">
                <u-swipe-action-item :options="options2" @click="changeOperation" :name="item.id"> -->
                    <!-- <view class="swipe-action u-border-top u-border-bottom">
                        <view class="swipe-action__content" v-for="item in businessList" :key="item.id" :autoClose="true">
                            <u--text :text="item.nickname"></u--text>
                            
                            <div>{{item.nickname}}</div>
                            <div>{{item.mobile}}</div>
                            
                        </view>
                    </view> -->
                <!-- </u-swipe-action-item>
            </u-swipe-action> -->
            <ul v-for="item in businessList" :key="item.id">
                <li class="bottom">
                    <!-- <u--text :text="item.nickname"></u--text> -->
                            
                    <div>客户名字：{{item.nickname}}</div>
                    <div class="mobile">客户手机号：{{item.mobile}}</div>
                    <!-- <u-button type="primary" size="small" text="用户详情" style="width:20vw;"></u-button>
                    <u-button type="warning" size="small" text="领取" style="width:20vw;"></u-button> -->
                    <view class="btn">
                        <u-button type="primary" size="small" text="客户详情" class="btn1" @click="toDetail(item.id)"></u-button>
                        <u-button type="warning" size="small" text="领取" class="btn1" @click="apply(item.id)"></u-button>
                        <u-button type="success" size="small" text="分配" class="btn1" @click="allot(item.id)"></u-button>
                        <u-button type="error" size="small" text="删除" class="btn1" @click="del(item.id)"></u-button>
                    </view>
                    

                </li>
            </ul>
        <!-- </u-cell-group> -->

        <u-modal v-if="flag==0" :show="show" :title="title" :content='content' :showCancelButton="true" @confirm="confirm"
            @cancel="show = false"></u-modal>
        <u-modal v-if="flag==1" :show="show" :title="title1" :content='content1' :showCancelButton="true" @confirm="confirm1"
            @cancel="show = false"></u-modal>
        <u-toast ref="uToast"></u-toast>
    </view>
</template>

<script>
export default {
    data() {
        return {
            id:0,
            businessList:[],
            sourceid:0,
            flag:0,
            show:false,
            title:'删除',
            title1:'领取',
            content:'是否确认删除该客户？',
            content1:'是否确认领取该客户？',
            btnStyle: {
                width: '100%',
                position: 'fixed',
                bottom: '0px'
            },
            LoginAdmin:uni.getStorageSync('LoginAdmin') ? uni.getStorageSync('LoginAdmin') : {}
        }
    },
    methods: {


        toDetail(id)
        {
            this.$u.route({
                    url:'pages/manage/highsea/detail',
                    params:{
                            id:id
                        }
                    });
        },

        allot(id)
        {
            this.$u.route({
                    url:'pages/manage/highsea/allot',
                    params:{
                            id:id
                        }
                    });
        },

        apply(id){
            this.flag = 1;
            this.id = id;
            this.show = true;
        },

        async confirm1(){
            // console.log('领取');
            let data = {
                    adminid:this.LoginAdmin.id,
                    id:this.id
            };
            let result = await this.$u.api.manage.HighseaApply(data);
            this.show = false;
            if(result.code === 1)
                {
                    this.$refs.uToast.show({
                        type:'success',
                        message:result.msg,
                        complete:() => {

                            this.getData();
                            return;
                        }
                    })
                }else{
                    this.$refs.uToast.show({
                        type:'error',
                        message:result.msg
                    });

                    return;
                }
        },

        del(id){
            this.flag = 0;
            this.id = id;
            this.show = true;
        },

        async confirm(){
            let data = {
                    adminid:this.LoginAdmin.id,
                    id:this.id
            };
            let result = await this.$u.api.manage.HighseaDel(data);
            this.show = false;
            if(result.code === 1)
                {
                    this.$refs.uToast.show({
                        type:'success',
                        message:result.msg,
                        complete:() => {

                            this.getData();
                            return;
                        }
                    })
                }else{
                    this.$refs.uToast.show({
                        type:'error',
                        message:result.msg
                    });

                    return;
                }
        },

        async getData()
        {
            let result = await this.$u.api.manage.HighseaIndex({adminid:this.LoginAdmin.id});

            if(result.code === 0)
            {
                this.$refs.uToast.show({
                    type:'error',
                    message:result.msg
                });

                return;
            }
            // console.log(result.data);
            // return;
            this.businessList = result.data;
        }
    },
    onLoad()
    {
        console.log('onLoad');
    },
    onShow()
    {
        this.getData();
    },
    onReady()
    {
        console.log('onReady');
    }
}
</script>


<style>
.bottom{
    border-bottom: 2px solid gray;
    font-weight: bold;
    margin: .5rem 0;
}

.mobile{
    font-size: .8rem;
    color: gray;
    
    margin-bottom: .5rem;
}

.btn{
    padding: 0 1rem .5rem 1rem;
    display:flex;
    
}



</style>